<template>
    <div :class="{ 'voice_wrap': true, 'large': duration > 40, 'middle': duration > 20 && duration < 41, 'small': duration < 21 }"
        @click="play">
        <i v-if="!isplay" style="font-size: 1.5rem;" class="el-icon-video-play" alt="" ></i>
      <i v-else class="el-icon-video-pause" alt="" style="font-size: 1.5rem;" ></i>

        <div class="voice_time_line" :id="'wave' + id"></div>
        <div class="duration">{{ duration }}"</div>
    </div>
</template>

<script>
//引入wavesurfer.js
import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
export default {
    props: {
        id: Number,
        url: String
    },
    data() {
        return {
            isplay: false,
            duration: null,
            wavesurfer: null,
        }
    },
    mounted() {
        let that = this;
        this.$nextTick(() => {
            that.wavesurfer = WaveSurfer.create({
                height: 24,
                container: '#wave' + that.id,
                maxCanvasWidth: 60,
                waveColor: '#000', // 浅蓝色
                progressColor: '#fff', // 深蓝色
                cursorColor: '#696969', // 灰色
                barGap: 1.8,
                interact: false,
                barWidth: 1.2,
                barHeight: 16,
                barMinHeight: 0.5
            });
            // 特别提醒：如果是本地文件此处需要使用require(相对路径)，否则会报错
            that.wavesurfer.load(that.url);
            that.wavesurfer.on('finish', function () {
                console.log('播放完毕：finish');
                that.isplay = false;
                that.wavesurfer.stop();
            });
            // 获取音频时长
            that.wavesurfer.on('ready', function () {
                that.duration = parseInt(that.wavesurfer.getDuration())
                console.log('Audio duration is: ' + that.duration + ' seconds');
            });
        })
    },
    methods: {
        play() {
            if (this.isplay) {
                this.isplay = false;
                this.wavesurfer.pause();
            }else{
                this.isplay = true;
                this.wavesurfer.play();
            }
            
        }
    }
}
</script>

<style>
.voice_wrap {
    background: #94BDEC;
    border-radius: 18px;
    height: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.voice_wrap img {
    width: 24px;
    height: 24px;
    margin-right: 4px;
}

.voice_wrap .voice_time_line {
    height: 24px;
}

.voice_wrap {
    cursor: pointer;
}

.voice_wrap .duration {
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    margin-left: 8px;
    cursor: pointer;
}

.voice_wrap.large {
    width: 262px;
}

.voice_wrap.large .voice_time_line {
    width: 177px;
}

.voice_wrap.middle {
    width: 203px;
}

.voice_wrap.middle .voice_time_line {
    width: 118px;
}

.voice_wrap.small {
    width: 144px;
}

.voice_wrap.small .voice_time_line {
    width: 59px;
}
</style>